<link href="css/style_event.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ddphpalbum.js"></script>
<script type="text/javascript" src="includes/getalbum.php?id=collectionalbum&page=5"></script>

<style type="text/css">
.photoalbum{
		width: 200px;
	}
	span.fadehover {
		position: absolute;
	}
	.fadehover:hover img{
		border: 1px solid navy;
	}
	img.a {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
	}

	img.b {
		position: absolute;
		left: 0;
		top: 0;
	}
	ul.thumb {
		float: left;
		list-style: none;
		width: 200px;
		margin-left: 2px;
		margin-bottom: 5px;
		display:block;
	}

	ul.thumb li {
		padding: 0px 5px 5px 0px;
		float: left;
		position: relative;  /* Set the absolute positioning base coordinate */
		width: 95px;
		height: 120px;
	}
	ul.thumb li span img {
		width: 95px; height: 120px; /* Set the small thumbnail size */
		-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
		/*border: 1px solid #ddd;*/
		padding: 0px 0px 0px 0px;
		/*background: #f0f0f0;*/
		position: absolute;
		left: 0; top: 0;
		padding: 2px;
	}
	ul.thumb li img.hover {
		background:center;  /* Image used as background on hover effect
		border: none; /* Get rid of border on hover */
	}
</style>
<div id="divContext" rel="test attribute" >
	<ul class="cmenu">
		<li id="aEvent0" onclick="reload_event('aEvent0')">Navigate to</li>
		<li id="aEvent1" onclick="reload_event('aEvent1')">Add to WebMark</li>
		<li id="aEvent2" onclick="reload_event('aEvent2')">disable this menu </li>
		<li id="aEvent3" onclick="reload_event('aEvent3')">disable this menu</li>
	</ul>
</div>
<div id="content_and_footer">
	<div id="page_content">
		<div id="content">
			<div id="event">
				
			</div>
			<div id="event_imglist">
            <script type="text/javascript">
                album = new phpimagealbum({
                    albumvar: collectionalbum, //ID of photo album to display (based on getpics.php?id=xxx)
                    dimensions: [2,2],
					kind: 'event',
                    status: 'onpress',
                    autodesc: "Photo %i", //Auto add a description beneath each picture? (use keyword %i for image position, %d for image date)
                    showsourceorder: false, //Show source order of each picture? (helpful during set up stage)
                    onphotoclick:function(thumbref, thumbindex, thumbfilename){
						var newImg = new Image();
					    newImg.src = collectionalbum.images[thumbindex][1];
					    var curHeight = collectionalbum.images[thumbindex][5];
					    var curWidth = collectionalbum.images[thumbindex][4];
					    var img = resize(curWidth,curHeight,fw,fh);
                        thumbnailviewer.loadimage(newImg.src,img[0],img[1],thumbindex, collectionalbum);
                    }
                });
            </script>
			</div>
			<div id="event_calendar">
				<p class="titlebar">&nbsp;&nbsp;&nbsp;&nbsp;CALEANDAR</p>
                <?php //initialize_calendar(5,2011);?>
				<!--<img alt="test_calendar.png" src="images/Theme/test_calendar.png" style="margin-top:15px"/>-->
			</div>
			<div id="event_imglist_footer">
				<img class="clickable" src="images/Theme/down_arrow.png" onclick="albumnextpage();"/>
			</div>
			<div id="event_calendar_footer">
				<img class="clickable" src="images/Theme/up_arrow.png" onclick="prev_month();"/>
				<img class="clickable" src="images/Theme/down_arrow.png" onclick="next_month();"/>
			</div>
		</div>
		<div id="sidebar">
			<div id="image_event">
			</div>
		</div>
	</div>
	<div id="footer">
					Copyright © 2011 WHEEL HOUSE CAFE
	</div>
</div>
<script type="text/javascript">
    var _contextmenudata; //usage: alert(_contextmenudata[1505][0]["event_id"]);
    var _mouseOverContext = false; // is the mouse over the context menu?
    var _divContext = $('#divContext'); // makes my life easier
	var _month;
	var _year;
    var _eventalbum;
    var _str = '<script type="text/javascript">create_album();<\/script>'
    InitContext();
    function InitContext() {
        //_divContext.onmouseover = function() { _mouseOverContext = true; };
        _divContext.mouseover(function() { _mouseOverContext = true; });
        _divContext.mouseout(function() { _mouseOverContext = false; });

        document.body.onclick = ContextMouseDown;
    }

function ContextMouseDown(event) {
    if (_mouseOverContext)
        return; // IE is evil and doesn't pass the event object
    if (event == null)
        event = window.event;
    if (!_mouseOverContext) _divContext.hide();
}

function CloseContext() {
    _mouseOverContext = false;
    _divContext.style.display = 'none';
}

// call from the onContextMenu event, passing the event
// if this function returns false, the browser's context menu will not show up
    function ContextShow(calendarid) {
        // document.body.scrollTop does not work in IE
        var scrollTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;
        var scrollLeft = document.body.scrollLeft ? document.body.scrollLeft : document.documentElement.scrollLeft;
		var target = $("#"+calendarid);
        var key = $("#"+calendarid).attr("rel");
        var arr_events = _contextmenudata[key];

        //hide all options first
        for (var i=0; i<4; i++){
            var elementid = "#aEvent" + i;
            $(elementid).hide();
        }
        for(var i=0; i<arr_events.length; i++){
            var time = arr_events[i]["time"];
            var elementid = "#aEvent" + time;
            $(elementid).html(arr_events[i]["name"]);
            $(elementid).attr("eventid",arr_events[i]["event_id"])
            $(elementid).show();
        }

        // hide the menu first to avoid an "up-then-over" visual effect
        _divContext.hide();
		var offset = target.offset();
        _divContext.css({ top: offset.top, left: offset.left + 15 });
        _divContext.show();
        //_divContext.style.display = 'block';
        //return false;
    }

    //reload event content when select an item in context menu
    function reload_event(liId)
    {
        var eventid = $("#"+liId).attr("eventid")
        _divContext.hide();
        jQuery.ajax({
            type:"POST",
            url:"includes/event.inc.php", 
            data:"mode="+2+"&eventid="+eventid,
            success:function(returndata){
                var json = jQuery.parseJSON(returndata);
                var imgurl = json.path;
                var info = json.info;
                
                var str = "<p class='titlebar'>&nbsp;&nbsp;&nbsp;&nbsp;EVENT</p>";
                if (info != null){
	                var arr = info.split('.-');
	                for(var i =0;i<arr.length;i++){
						str += "<p style='text-align:justify'>" + arr[i] + "</p>";
					}
	            }
                $('#event').html(str);
                
                //render image:
                str = "<img class='img_event' alt='event.png' src='"+imgurl+"'/>";
                $('#image_event').html(str);

                var albumdata = json.albumdata;
                collectionalbum = albumdata;
                album.reset(collectionalbum);
                //alert(albumdata.images[0][1]);
            }
        });
    }
	function albumnextpage()
	{
		album.gonextpage();
	}
	function next_month(){
		if (_month == 11){
			_month = 1;
			_year = parseInt(_year) + 1;
		}else if(_month == 12) {
			_month = 2;
			_year = parseInt(_year) + 1;
		}else
			_month = parseInt(_month) + 2;
		reload_calendar(_month, _year);
	}
	
	function prev_month(){
		if (_month == 1){
			_month = 11;
			_year = parseFloat(_year) - 1;
		}else if(_month == 2) {
			_month = 12;
			_year = parseFloat(_year) - 1;
		}else{
			_month = parseFloat(_month) - 2;
		}
		
		reload_calendar(_month, _year);
	}
	
	function reload_calendar(month, year)
	{
		$.ajax({
            type: "POST",
            url: "includes/event.inc.php",
			data:"mode="+1+"&month="+month+"&year="+year,
            success: function(returndata){
                var json = jQuery.parseJSON(returndata);
                var calendar = json.calendar;
                _contextmenudata = json.contextmenudata;
                $('#event_calendar').html(calendar);   
            }
        });
	}
	$(document).ready(function() {
        $.ajax({
            type: "POST",
            url: "includes/event.inc.php",
            success: function(returndata){
                var json = jQuery.parseJSON(returndata);
                var calendar = json.calendar;
                _contextmenudata = json.contextmenudata;
                $('#event_calendar').html(calendar);

                var imgurl = json.path;
                var info = json.info;
                var str = "<p class='titlebar'>&nbsp;&nbsp;&nbsp;&nbsp;EVENT</p>";
                if(info != null){
               	 	var arr = info.split('.-');
	                for(var i =0;i<arr.length;i++){
						str += "<p style='text-align:justify'>" + arr[i] + "</p>";
					}
                }
                $('#event').html(str);
                //render image:
                str = "<img class='img_event' alt='event.png' src='"+imgurl+"'/>";
                $('#image_event').html(str);

                _month = json.month;
                _year = json.year;
                //alert('asdfasdf')
                //album.reset(collectionalbum);
                //$('#event_imglist').html(_str);
			}
        });
    });
</script>
